{layout  name="public:layout" /}
<link rel="stylesheet" href="/static/assets/js/layui/css/layui.css">
<link rel="stylesheet" href="/static/assets/css/common.css">
<link rel="stylesheet" href="/static/assets/css/mediaStyle.css">
<script src='/static/assets/js/echarts.min.js'></script>
<script src='/static/assets/js/Charts.js'></script>
<script src='/static/assets/js/jq_extend.js'></script>
<script src='/static/assets/js/jquery.ztree.all.min.js'></script>
<script src='/static/assets/js/jquery.ztree.core.min.js'></script>
<script src="/static/assets/js/layui/layui.all.js"></script>
<script src='/static/assets/js/main.js'></script>
<script src="/static/js/base64.js"></script>

<style>
    .icon-search{
        display: inline-block;
        width: 16px;
        height: 16px;       
        background-size: 100% 100%;
        background-repeat: no-repeat;  
    }
</style>
<div class="content">

    <div class="header">

        <h1 class="page-title">数据统计</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="#">系统管理</a> <span class="divider">/</span></li>

        <li class="active">数据统计</li>
    </ul>

    <div class="container-fluid">
        <div class="row-fluid">

            <div class="btn-toolbar">
                <input name="time" type="text" value="{$time}" class="input-xlarge" style="width: 275px;" id="test1" placeholder="时间段查询" autocomplete="off">

                <button class="btn select" type="button" style="margin-top: -10px;"><i class="icon-search"></i> 查询</button>
            </div>
            <div class="well" style="margin-top: -15px;">
                <!--                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#home" data-toggle="tab">个人信息</a></li>
                                    <li><a href="#profile" data-toggle="tab">修改密码</a></li>
                                </ul>-->
                <div id="myTabContent" class="tab-content">
                    <!-- 图表box -->
                    <div class='main-box c-table-data-analysis'>
                        <div class='chart-box' id='native_proportion'></div>
                    </div>
                </div>
                <input type="hidden" name="wx" value="{$wcount}">
                <input type="hidden" name="zfb" value="{$zcount}">
                <input type="hidden" name="yh" value="{$ycount}">

            </div>

            <footer>
                <hr>

                <p class="pull-right">Collect from <a href="#" title="网页模板" >sxddd</a></p>


                <p>&copy; 2019 <a href="#" >Portnine</a></p>
            </footer>

        </div>
    </div>
</div>
<script>
    $(".select").click(function () {
        var time = base64.encode($("[name=time]").val());
        //var mstart = $("[name=mstart]").val();
        //var mend = $("[name=mend]").val();
        //var info = $("[name=info]").val();
        window.location.href = "/statistics?time=" + time;
    })

    //日期时间范围选择
    laydate.render({
        elem: '#test1'
        , type: 'datetime'
        , range: '—' //或 range: '~' 来自定义分割字符
    });

    var wx = $("[name=wx]").val();
    var zfb = $("[name=zfb]").val();
    var yh = $("[name=yh]").val();


    var chart = chart || {};
    chart = {
        init: function () {
            chart.getManWomenLine();

        },
        //籍贯比例饼图
        getNativeProportion: function () {
            var chart = new Charts();
            chart.getChart({
                dom: "native_proportion",
                data: [
                    {
                        name: "微信收入",
                        data: wx
                    },
                    {
                        name: "支付宝收入",
                        data: zfb
                    },
                    {
                        name: "银行短信收入",
                        data: yh
                    },
                ],
                title: "收入比例图",
                type: "pie",
                xAxis: ["微信", "支付宝", "银行短信"]
            })
        }


    }
    chart.getNativeProportion();
</script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
    chart.graduationBar();
</script>



